<template>
  <div class="zhuanke  mt-4 pl-4">
    <detai-title-com :title="shortName"></detai-title-com>

    <introduce  v-if="type==='tuandui' && doctorId > 0" @show-code="showCode" :company="company" :employee="doctor"></introduce>

    <news-com v-show="type==='anli' && doctorId === 0" :departmentId="code" :type="type" :total="total" :list="articleList" @change="onChange"></news-com>

    <team :currentDepartmentId="code" :showNav="true" v-if="type==='tuandui' && doctorId == 0" :company="company" :team="team" :total="total" @change="onChange"></team>

    <iframe-com v-if="!isNullOrEmpty(article.profileHtml) && (type !== 'tuandui' || (type==='anli' && doctorId > 0))" :html="article.profileHtml"></iframe-com>
  </div>

</template>

<script>

  import detaiTitleCom from "@/components/detaiTitleCom"
  import IframeCom from "../../components/iframeCom";
  import HospitalTeam from "./hospitalTeam";
  import TeamCom from "../../components/teamCom";
  import Team from "./team";
  import Introduce from "../../components/introduce";
  import NewsCom from "../news/newsCom";

  export default {
    props: ['departments', 'company'],
    watch: {
      departments: function (val) {
        this.getNav(val)
      }
    },
    computed: {},
    data() {
      return {
        articleList:[],
        //医生详情
        doctorId: 0,
        doctor:{},

        //专家团队
        team: [],
        total: 0,

        loadedData: false,
        code: '',
        shortName: '',
        departmentId:'0',
        departmentName:'',
        type: '',
        article: {
          profileHtml: ''
        },
        nav:{
          "name": "zhuanke",
          "title": "科室介绍",
          "enTitle": "DEPARTMENTS",
          "children": [
            ]
        },
        subNav: [],
        activeNav: {},
        licheng: [],
        honor:[],
        typeList:[
          //{type:'jieshao', name: '中心介绍'},
          {type:'tese', name: '中心特色'},
          {type:'tuandui', name: '专家团队'},
          {type:'shebei', name: '先进设备'},
          //{type:'anli', name: '成功案例'},
          {type:'guanyu', name: '关于{departmentName}'}
        ],
        pagination: {
          pageSize: 10,
          pageNum: 1
        },
      }
    },
    components: {
      NewsCom,
      Introduce,
      Team,
      TeamCom,
      HospitalTeam,
      IframeCom,
      detaiTitleCom},
    mounted() {
      this.getNav(this.departments)
    },
    created() {
      //this.setIframeHeight(document.getElementById('previewFrame'));
    },
    methods: {
      onChange(pagination) {
        this.dlog('-------------',pagination)
        this.pagination = pagination;
        this.getData()
      },

      getNav(val) {
        this.code = this.$route.params.code;
        this.dlog('专科code:' + this.code);

        this.type = this.$route.params.type;
        this.dlog('专科type:' + this.type);

        /*if (this.isNullOrEmpty(this.type)) {
          this.type = 'tese'
        }*/

        this.doctorId = this.$route.params.doctorId

        if (this.isNullOrEmpty(this.doctorId)) {
          this.doctorId = 0;
        }

        if (typeof(val) === 'object') {
          this.nav.children = []

          let isTypeActive = false;
          let hasAcvtive = false;
          let activeDepartmentIndex = 0
          let currentDepartmentIndex = 0
          for (let d of val) {
            //拿到active的子结构
            let subNav = [{
              title: '医生团队',
              code: 'tuandui',
              type: 'tuandui'
            }]
            try {
              subNav = JSON.parse(d.subItems)
            } catch (e) {
            }

            if (this.code === d.id) {
              activeDepartmentIndex = currentDepartmentIndex;
              hasAcvtive = true;
              this.departmentName = d.departmentName;
              this.departmentId = d.id
              this.subNav = subNav
            }
            currentDepartmentIndex++;
            let department = {
              id: d.id,
              title: d.departmentName,
              link: "/zhuanke/" + d.id,
              active: this.code === d.id,
              code: d.id,
              isShow: true,
              children: [],
              subNav: subNav
            };
            //根据后台配置
            for (let n of subNav) {
              switch(n.type) {
                case 'tuandui': n.code = 'tuandui'; break;
                case 'anli': n.code = 'anli'; break;
              }
              if (!isTypeActive && this.code === d.id && n.code === this.type) {
                //保证只进来一次
                console.log('保证只进来一次:' + isTypeActive
                  + 'n.code：' + n.code
                  + 'this.type：' + this.type
                )
                console.log()
                isTypeActive = true
                console.log('isTypeActive' + isTypeActive)
                this.shortName = n.title

                this.activeNav = n
              }
              department.children.push({
                id: d.id,
                title: n.title,
                type: n.code,
                link: '/zhuanke/' + d.id + '/' + n.code,
                active: isTypeActive && n.code === this.type
              })
            }
            this.nav.children.push(department)
          }

          if (!isTypeActive) {
            this.nav.children[activeDepartmentIndex].children[0].active = true
            this.type = this.nav.children[activeDepartmentIndex].children[0].type
            this.shortName = this.nav.children[activeDepartmentIndex].children[0].title
            this.activeNav = this.nav.children[activeDepartmentIndex].subNav[0]
          }

          if (!hasAcvtive) {
            this.nav.children[0].active = true
            this.code = this.nav.children[0].id
            this.departmentName = this.nav.children[0].title
            this.departmentId = this.nav.children[0].id
            this.activeNav = this.nav.children[0].subNav[0]
          }

          this.dlog('this.code', this.code)
          this.dlog('this.shortName', this.shortName)
          this.dlog('this.departmentName', this.departmentName)
          this.dlog()
          this.dlog('new NAV', this.nav)
          this.$emit('changeNav', this.nav)
          this.$emit('changeTip', this.getTip())
          this.getData()
        }
      },

      getTip() {
        let tips = []
        tips.push({
          name:'科室介绍',
          link:'/zhuanke'
        });

        if (!this.isNullOrEmpty(this.code)) {
          tips.push({
            name: this.departmentName,
            link:'/zhuanke/' + this.code
          });
        }

        if (this.doctorId > 0) {
          if (!this.isNullOrEmpty(this.type)) {
            tips.push({
              name: this.shortName,
              link:'/zhuanke/' + this.code + '/' + this.type
            });
          }
        } else {
          if (!this.isNullOrEmpty(this.type)) {
            tips.push({
              name: this.shortName,
              //link:'/zhuanke/' + this.code + '/' + this.type
            });
          }
        }
        this.dlog('tips',tips)
        return tips;
      },

      showCode() {
        this.$emit('show-code', true);
      },

      getData() {
        this.dlog('this.type', this.type)
        switch (this.type) {
          case 'tuandui':
            if (this.isNullOrEmpty(this.doctorId)) {
              this.pagination.id = this.code
              this.getHttpObject()
                .setApi('tuandui', this.pagination)
                .onSucc((res) => {
                  let data = res.data.data;
                  this.dlog('收到的专科部数据:')
                  this.dlog(data);
                  this.data = data
                  this.team = data.list
                  this.total = data.total
                }).goAxios()
            } else {
              this.getHttpObject()
                .setApi('doctor', {id: this.doctorId})
                .onSucc((res) => {
                  let data = res.data.data;
                  this.dlog('收到的医生部数据:')
                  this.dlog(data)
                  this.data = data
                  this.doctor = data.doctor
                }).goAxios()
            }
            break;
          case 'anli':
            if (this.isNullOrEmpty(this.doctorId)) {
              this.pagination.id = this.code
              this.getHttpObject()
                .setApi('anli', this.pagination)
                .onSucc((res) => {
                  let data = res.data.data;
                  this.dlog('收到的专科部数据:')
                  this.dlog(data)
                  this.data = data
                  this.articleList = data.articles
                  this.total = data.total
                }).goAxios()
            } else {
              this.getHttpObject()
                .setApi('news/detail', {id: this.doctorId})
                .onSucc((res) => {
                  let data = res.data.data;
                  this.dlog('收到的医生部数据:')
                  this.dlog(data)
                  this.data = data
                  this.article = data.article
                }).goAxios()
            }
            break;
          default:

            this.getHttpObject()
              .setApi('news/detail', {id: this.activeNav.articleId})
              .onSucc((res)=>{
                let data = res.data.data;
                this.dlog('收到的专科部数据:')
                this.dlog(data)
                this.data = data
                this.article = data.article ? data.article : {profileHtml: '暂无内容'}
              }).goAxios()
            break;
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "~assets/style/public";

  .zhuanke {
    iframe{
      overflow: hidden;
    }

    ul, li {
      list-style: none;
    }
    .item{
      border-bottom: 2px dotted #D8D8D8;
      p{
        margin-bottom: 0;
      }
      .left{
        display: flex;
        align-items: center;
        justify-content: center;
        p{
          .padding(20,20,20,20);
          background: #F9FAFC;
          font-family: MicrosoftYaHeiUI;
          font-size: 18/@size;
          color: @theme-color;
          letter-spacing: 0;
        }
      }
      .list{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        p{
          line-height: 1.8;
          font-family: MicrosoftYaHeiUI;
          font-size: 16/@size;
          color: #222222;
        }
      }
      .right{
        background: #F9FAFC;
        .padding(15,15,15,15);
        .time{
          font-family: MicrosoftYaHeiUI-Bold;
          font-size: 16/@size;
          color: #F56C6C;
          letter-spacing: 0;
        }
        .media{
          border-bottom: 1px solid #E5E9F2;
          .padding(0,0,20,0);
        }
        .media-body{
          font-family: MicrosoftYaHeiUI;
          font-size: 16/@size;
          color: #222222;
          letter-spacing: 0;
          line-height: 24/@size;
        }
      }
    }
  }


</style>
